<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .icon-1 {
        position: relative;
        left: -0.36458vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        height: 10.6481481481vh;
        width: 8.95833vw;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        cursor: pointer;
      }
      .icon-1 .background {
        position: absolute;
        inset: 0;
        background-image: url('./images/light2.png');
        background-repeat: no-repeat;
        background-size: 85% 100%;
        background-position: 50% 1.2037037037vh;
        animation: opacity1 2s infinite cubic-bezier(0.39, 0.58, 0.57, 1) alternate;
      }
      .icon-1 img[data-v-6043ce19] {
        position: relative;
        margin-bottom: 2vh;
        animation: top 2s infinite cubic-bezier(0.39, 0.58, 0.57, 1) alternate;
        vertical-align: middle;
        border: none;
      }
      .icon-1 .label-123 {
        position: absolute;
        top: 15%;
        right: 0;
        height: 4.01042vw;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dff2ff));
        background: linear-gradient(180deg, #ffffff 0%, #dff2ff 100%);
        -webkit-writing-mode: tb;
        -ms-writing-mode: tb;
        writing-mode: vertical-lr;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: white;
        text-align: center;
        font-size: 0.72917vw;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        letter-spacing: normal;
        white-space: nowrap;
        text-shadow: 0px 0px 0.20833vw #8ac2ff;
        -webkit-background-clip: text;
        background-clip: text;
        /* -webkit-text-fill-color: transparent; */
        -webkit-text-fill-color: unset;
      }
      @keyframes top {
        from {
          /* top: 0px; */
          transform: translateY(0px);
        }

        to {
          /* top: -15px; */
          transform: translateY(-15px);
        }
      }
      @keyframes opacity1 {
        from {
          opacity: 1;
        }

        to {
          opacity: 0.5;
        }
      }
    </style>
  </head>
  <body>
    <div id="camera-3" data-v-6043ce19="" class="icon-1 active" onclick="foo12(1, this)">
      <div class="background"></div>
      <img
        data-v-6043ce19=""
        src="./images/SketchPng8fe7516a1f0b9784d6cfd7bce2fbd5779cc1c0f3dfa71a5f1a692f2fcb54240a.jpg"
        style="width: 70px"
      />
      <div data-v-6043ce19="" class="label-123">摄像机</div>
    </div>
    <script></script>
  </body>
</html>
